<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jquery.mobile-1.4.5.min.css">
    <script src="../../jquery-2.2.3.js"></script>
    <script src="../../jquery.mobile-1.4.5.min.js"></script>
    <script src="../../jquery-easing.js"></script>
    <title>jquery-mobile2</title>
</head>
<body>
<div data-role="page" id="main" data-theme="a">
    <div data-role="header">
        <h3>我的首页</h3>
    </div>
    <div data-role="content">
        <h2>有序列表:</h2>
        <br/>
        <ol data-role="listview">
            <li><a href="#">列表内容<span class="ui-li-count">2</span></a></li>
            <li data-icon="false"><a href="#">列表内容</a> </li>
            <li>列表内容</li>
        </ol>
        <br/>
        <h2>无序列表:</h2>
        <br/>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">组1</li>
            <li><a href="#">列表内容</a> </li>
            <li data-role="list-divider">组2</li>
            <li><a href="#">列表内容</a> </li>
            <li><a href="#">列表内容</a> </li>
        </ul>

        <div>
            <h2>我的通讯录</h2>
            <ul data-role="listview" data-autodividers="true" data-inset="true">
                <li><a href="#">Adele</a></li>
                <li><a href="#">Agnes</a></li>
                <li><a href="#">Albert</a></li>
                <li><a href="#">Billy</a></li>
                <li><a href="#">Bob</a></li>
                <li><a href="#">Calvin</a></li>
                <li><a href="#">Cameron</a></li>
                <li><a href="#">Chloe</a></li>
                <li><a href="#">Christina</a></li>
                <li><a href="#">Diana</a></li>
                <li><a href="#">Gabriel</a></li>
                <li><a href="#">Glen</a></li>
                <li><a href="#">Ralph</a></li>
                <li><a href="#">Valarie</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>